<template>
  <div>

    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>补贴审核</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <div style='font-size: 14pt;font-weight:800'>
        筛选条件
      </div>

      <el-row :gutter="20" style='margin-top: 10px;margin-left: 20px'>
        <!--单位名称-->
        <el-col :span="5">
          <!--<el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getAuditsList">
            <el-button slot="append" icon="el-icon-search" @click="getAuditsList"></el-button>
          </el-input>
          -->
          <el-row>
            <el-col :span="6">
              <div style='margin-top: 10px;font-size: 10pt'>单位账号</div>
            </el-col>
            <el-col :span="18">
              <el-input v-model="organization" placeholder="请输入单位账号" ></el-input>
            </el-col>
          </el-row>
        </el-col>
        <!--补贴状态-->
        <el-col :span="4">
          <el-row>
            <el-col :span="8">
              <div style='margin-top: 10px;font-size: 10pt'>补贴状态</div>
            </el-col>
            <el-col :span="16">
              <el-select v-model="auditState" placeholder="请选择">
                <el-option
                  v-for="item in auditStateOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <!--日期范围-->
        <el-col :span="9">
          <el-row>
            <el-col :span="4">
              <div style='margin-top: 10px;font-size: 10pt'>日期范围</div>
            </el-col>
            <el-col :span="20">
              <el-date-picker
                v-model="dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-col>
          </el-row>
        </el-col>
        <!--搜索按钮-->
        <el-col :span="6">
          <el-button type="primary" @click="getAuditsList">查询结果</el-button>
          <el-button type="danger" @click="clearSearch">清除筛选</el-button>
        </el-col>
      </el-row>

      <div style='font-size: 12pt; margin-top:25px' >
        <h3>查询结果</h3>
      </div>
      <!-- table表格区域 -->
      <el-table :data='auditsList' border stripe :header-cell-style="{background:'#eee',color:'#606266',fontSize: '14px'}">
        <el-table-column label="补贴名称" prop="allowanceName" width="210px" align="center"></el-table-column>
        <el-table-column label="时间" prop="allowanceTime" width="220px" align="center"></el-table-column>
        <el-table-column label="使用标文号" prop="zbwhStr" width="200px" align="center"></el-table-column>
        <el-table-column label="状态" prop="state" width="150px" align="center"></el-table-column>
        <el-table-column label="查看详细信息" align="center" width="180px">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="goDetailPage(scope.row.allowanceId,scope.row.gjjzh)">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" :disabled="scope.row.state =='已提交'?false:true" @click="openConfirmDialog(scope.row.allowanceId)">确认</el-button>
            <el-button type="danger" size="mini" :disabled="scope.row.state =='已提交'?false:true" @click="openRejectDialog(scope.row.allowanceId)">驳回</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum" :page-sizes="[5, 10, 15, 20]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total" background>
      </el-pagination>

      <!--确认弹窗-->
      <el-dialog
        title="通过补贴"
        :visible.sync="confirmDialogVisible"
        width="30%"
      >
        <el-input
          type="textarea"
          :rows="4"
          placeholder="请输入审核评论内容"
          v-model="confirmRemark">
        </el-input>
        <span
          slot="footer"
          class="dialog-footer"
        >
          <el-button  type="primary"  @click="confirmAllowance">确认</el-button>
          <el-button  @click="closeConfirmDialog">取消</el-button>
        </span>
      </el-dialog>

      <!--驳回弹窗-->
      <el-dialog
        title="驳回补贴"
        :visible.sync="rejectDialogVisible"
        width="30%"
      >
        <el-input
          type="textarea"
          :rows="4"
          placeholder="请输入审核评论内容"
          v-model="rejectRemark">
        </el-input>
        <span
          slot="footer"
          class="dialog-footer"
        >
          <el-button  type="primary"  @click="rejectAllowance">驳回</el-button>
          <el-button  @click="closeRejectDialog">取消</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      confirmDialogVisible: false, // 确认弹窗
      rejectDialogVisible: false, // 驳回弹窗
      confirmRemark:'',//确认评论
      rejectRemark:'',//驳回评论
      confirmAllowanceId:'',//确认弹窗内补贴id
      rejectAllowanceId:'',//驳回弹窗内补贴id
      auditorUsername:'',//审核员用户名

      buttonDisabled:true,

      // 查询参数对象
      queryInfo: {
        query: '',
        pagenum: 1,
        pagesize: 10
      },
      // 商品列表
      // 总数据条数
      total: 0,

      auditsList: [],
      organization: '', // 输入框单位名称
      auditState: '已提交', // 输入框补贴状态
      // 补贴状态选择框
      auditStateOptions: [
      {
        value: '已提交',
        label: '已提交'
      }, {
        value: '驳回',
        label: '驳回'
      },{
        value: '通过',
        label: '通过'
      }],
      dateRange: []// 日期范围
    }
  },
  created() {
    /*this.$http.get('/allowance/findAll',{ emulateJSON:true}).then(function(data){
      console.log(data)
    })*/
    this.auditorUsername=window.sessionStorage.getItem('username')
    this.organization = window.sessionStorage.getItem('gjjzh')
    console.log(this.auditorUsername)
    this.auditState = !this.$route.query.stateInfo ? '已提交' : this.$route.query.stateInfo
    this.getAuditsList()
  },
  methods: {
    // 清除筛选
    clearSearch() {
      this.auditState = ''
      this.organization = ''
      this.dateRange = []
      this.getAuditsList()
    },
    checkTime(i){
      if(i<10){
        i='0'+i
      }
      return i;
    },

    // 根据分页查询结果 改
     getAuditsList() {
      /*this.$http.get('/audit/getAllowanceByGjjzhAndState',{ emulateJSON:true}).then(function(data){
        console.log(data)
      })*/
       console.log(this.dateRange)
       var startDate=null
       var endDate=null
       if(this.dateRange.length!=0) {
         startDate = this.dateRange[0].getFullYear() + '-' + this.checkTime(this.dateRange[0].getMonth() + 1) + '-' + this.checkTime(this.dateRange[0].getDate());
         endDate = this.dateRange[1].getFullYear() + '-' + this.checkTime(this.dateRange[1].getMonth() + 1) + '-' + this.checkTime(this.dateRange[1].getDate());
       }
       const { data: res } = this.$http.get('/audit/getAllowanceByGjjzhAndState',{params:{
           pageNum:this.queryInfo.pagenum,
           pageSize:this.queryInfo.pagesize,
           gjjzh:this.organization,
           state:this.auditState,
           startDate:startDate,
           endDate:endDate
         }},{ emulateJSON:true}).then(res => {
         console.log(res)
         if (res.data.code !== 200) {
           return this.$message.error('获取补贴列表失败！')
         }
         else{
           this.total=res.data.data.total
           this.auditsList=res.data.data.records
           //处理后端数据 得到状态文字和指标文号list
           for(var j=0;j<this.auditsList.length;j++){
             this.auditsList[j].zbwhStr=''
             for(var i=0;i<this.auditsList[j].zbwhList.length;i++){
               this.auditsList[j].zbwhStr=this.auditsList[j].zbwhStr+this.auditsList[j].zbwhList[i]+' '
             }
           }
           console.log( this.auditsList)
         }
       })
    },

    // 修改分页
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize
      this.getAuditsList()
    },
    // 选择页数
    handleCurrentChange(newPage) {
      this.queryInfo.pagenum = newPage
      this.getAuditsList()
    },
    // 确认
    async confirmAllowance() {
      console.log(this.confirmAllowanceId)
      if(this.confirmRemark==''||this.confirmRemark==null){
        this.$message({
          message: '请输入审核员评论',
          type: 'warning'
        });
      }
      else{
        this.$http.post('/audit/auditAllowance',{
            allowanceId:this.confirmAllowanceId,
            auditorUsername:this.auditorUsername,
            auditRecordId: "",
            auditTime: "",
            operation:0,
            remark:this.confirmRemark
        },{emulateJSON:true}).then(res => {
          console.log(res.data)
          this.$message.success('确认成功！')
          this.getAuditsList()
          this.closeConfirmDialog()
        })
      }

    },
    // 驳回
    async rejectAllowance() {
      console.log(this.rejectAllowanceId)
      if(this.rejectRemark==''||this.rejectRemark==null){
        this.$message({
          message: '请输入审核员评论',
          type: 'warning'
        });
      }
      else{
        const { data: res } = this.$http.post('/audit/auditAllowance',{
          allowanceId:this.rejectAllowanceId,
          auditorUsername:this.auditorUsername,
          auditRecordId: "",
          auditTime: "",
          operation:1,
          remark:this.rejectRemark
        },{emulateJSON:true}).then(res => {
          console.log(res.data)
          this.$message.success('驳回成功！')
          this.getAuditsList()
          this.closeRejectDialog()
        })
      }

    },
    // 查看详情
    goDetailPage(id,gjjzh) {
      // console.log(id)
      this.$router.push({
        path: '/audit/detail',
        query: { 'id': id,
          'gjjzh':gjjzh
        }
      })
    },

    //关闭确认补贴弹窗
    closeConfirmDialog(){
      this.confirmRemark=''
      this.confirmDialogVisible= false
      this.confirmAllowanceId=''
      console.log(this.confirmAllowanceId)
    },
    //关闭驳回补贴弹窗
    closeRejectDialog(){
      this.rejectRemark=''
      this.rejectDialogVisible= false
      this.rejectAllowanceId=''
    },

    //打开确认补贴弹窗
    openConfirmDialog(id){
      this.confirmRemark=''
      this.confirmDialogVisible= true
      this.confirmAllowanceId=id
    },
    //打开驳回补贴弹窗
    openRejectDialog(id){
      this.rejectRemark=''
      this.rejectDialogVisible= true
      this.rejectAllowanceId=id
    },
  }
}
</script>

<style lang="less" scoped>
</style>
